<template>
	<view class="wrap">
		<view class="collectList u-p-10">
			<view @tap='jump(`/pages/goods/show`,goods.goods_id)' class="goodsBox u-flex u-p-10 u-m-t-20 u-m-b-20" v-for="goods in goodsList" :key="goods.id" >
				<view class="u-flex-3 u-border">
					<u-image width="100%" height="200" border-radius="20" :src="goods.goods.cover_url"></u-image>
				</view>
				<view class="u-flex baseInfo u-row-between u-flex-9 u-col-top u-p-l-20">
					<view class="title u-font-32">{{goods.goods.title}}</view>
					<view class="small u-line-1" style="color: #606266;">{{goods.goods.description}}</view>
					<view class="price">￥{{goods.goods.price}}</view>
					<view class="small" style=" color: #909399;">收藏时间:{{goods.created_at}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList:[]
			};
		},
		async onLoad() {
			const data=await this.$u.api.collectList()
			this.goodsList=data.data
			console.log(data.data)
		},
		methods:{
			// 商品详情跳转
			jump(url,id){
				this.$u.route({
					url,
					params:{id}
				})
			},
			// 取消收藏商品
			async collect(){
				// 取消收藏API
				await this.$u.api.goodsCollect(this.goodsId);
				// 取消收藏之后，提示消息，并隐藏
				this.$u.toast('取消收藏');
				this.isCollect = 0;
			},
		}
	}
</script>

<style scoped lang="scss">
.wrap{
	.collectList{
		
		.goodsBox{
			background-color: #fbfafb;
			// box-shadow: 0 0 5rpx 6rpx rgba($color: #ccc, $alpha: 0.3);
			.baseInfo{
				height: 200rpx;
				flex-direction: column;
				.title{
					font-weight: 550;
				}
				.price{
					color: red;
				}
			}
		}
	}
}
</style>
